<template>
	<view>
		<!-- 顶部导航 -->
		<u-navbar :background="background">
			<view class="ft_16 fw-b">
				意见反馈	
			</view>
		</u-navbar>
		<view class="content">
			<view class="con_1">
				<view class="">
					<view class="display p_bottom_10 just_space" style="border-bottom:1px solid #eeeeee;">
						<view class="">
							姓名
						</view>
						<u-input type="text" v-model="username" placeholder="请填写姓名" input-align	="right"/>
					</view>
					<view class="display just_space border_b">
						<view class="">
							联系电话
						</view>
						
						<u-input type="number" v-model="phone" placeholder="请填写联系方式" input-align="right" maxlength="11" onkeyup="phone=phone.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/>
					</view>
				</view>
				
				<view class="p_bottom_10">
					<view class="shuoming">
						<u-input v-model="opinion" @input="JTzishu" maxlength="20" placeholder="您的宝贵意见有助于我们为您提供更好的服务" type="textarea" height="200"/>
						<view class="c-999 ft_12" style="text-align: right;">
							{{zishu}}/20
						</view>
					</view>
				</view>
				
				<view class="p_top_10 p_bottom_10">
					<view class="p_bottom_10">
						添加图片
					</view>
					<view class="display" style="flex-flow: wrap;">
						<image :src="item" mode="aspectFill" v-for="(item,index) in addimgList" :key="index" @click="$all.preview2(addimgList,index)"></image>
						<view class="addimg" @click="addImg" v-if="addimgList.length<9">
							<u-icon name="plus" color="#ffffff" size="60"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="con_2">
				<view class="submitBtn ft_16" @click="submit">
					提交意见
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',}, //导航栏背景
				
				username:"",//姓名
				phone:"",//手机号
				opinion:"", //意见
				zishu:0, //字数
				addimgList:[], //添加的反馈图片
				
			}
		},
		methods: {
			JTzishu(e){ //监听字数
				console.log(e.length);
				this.zishu=e.length
			},
			addImg(){ //选择上传图片
				uni.chooseImage({
					count: 9,
					success: chooseImageRes => {
						console.log(chooseImageRes.tempFilePaths)
						uni.showLoading()
						new Promise(reslove=>{
							chooseImageRes.tempFilePaths.some((filePath, idx) => {
								uni.uploadFile({
									url: getApp().globalData.domainName + 'common/upload',
									filePath: filePath,
									name: 'file',
									success: (res2) => {
										console.log(JSON.parse(res2.data))
										if(JSON.parse(res2.data)){
											this.addimgList.push(JSON.parse(res2.data).data.fullurl)
										}
									}
								})
							})
							reslove()
						}).then(()=>{
							uni.hideLoading()
						})
					}
				});
			},
			
			submit(){ //提交意见
				if(!this.$all.checkPhone(this.phone)) return
				let images=this.addimgList.join(',')
				let dataInfo={
					username:this.username,
					mobile:this.phone,
					content:this.opinion,
					images:images,
				}
				console.log(dataInfo);
				this.$myRequest('user/feedback',dataInfo)
				.then(res=>{
					console.log(res.data);
					this.$all.toast(res.data.msg)
					if(res.data.code==1){
						setTimeout(()=>{
							uni.navigateBack()
						},800)
					}
					
				})
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}
.content{
	padding-top: 5px;
	.con_1{
		background-color: #FFFFFF;padding: 15px;
		.border_b{
			border-bottom:1px solid #eeeeee;padding: 10px 0;margin-bottom: 20px;
		}
		.shuoming{
			background-color: #f2f2f2;border-radius: 5px;padding: 10px;
			textarea{
				max-height: 120px;width: 325px;
			}
		}
		.SCnumber{
			padding: 10px;background-color: #FFFFFF;border: 1px solid #eeeeee;
			border-radius: 5px;
		}
		image{
			width: 100px;height: 100px;border-radius: 10px;margin: 0 10px 10px 0;
		}
		.addimg{
			width: 100px;height: 100px;background-color: #f2f2f2;border-radius: 10px;text-align: center;line-height: 100px;
			margin: 0 10px 10px 0;
		}
		
	}
	.con_2{
		padding: 50px 15px;
		.submitBtn{
			text-align: center;background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);padding: 12px 0;color: #FFFFFF;border-radius: 30px;margin-bottom: 20px;
		}
	}
	
}

</style>
